<template>
  <div class="discover-page">
    <div class="header">
      <ul>
        <li
          v-for="(h, index) in headerTitles"
          :key="index"
          :class="active == index ? current : ''"
          @click="change(index)"
        >
          {{ h.name }}
        </li>
      </ul>
    </div>
    <div class="lists">
      <div class="list">
        <div class="list-pic">
          <img
            src="https://x.dscmall.cn/storage/uploads/image/9310_s89DXOQyRaIrXh31kopkeCoq80QDpm.png"
            alt=""
          />
        </div>
        <div class="list-title">
          李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫
        </div>
        <div class="list-bottom">
          <div class="left">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKibH9TSb1cKvqZocrBYAsT3Wb4s4vjEvpVhR9e8eoeR2aHstKlFbPBztFiaXxfknsEvI0nO9FjKtNA/132"
              alt=""
            />
            <div class="name">YANG</div>
          </div>
          <div class="right">
            <i class="iconfont icon-xianshi"></i>
            <span>1787</span>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="list-pic">
          <img
            src="https://x.dscmall.cn/storage/uploads/image/9310_s89DXOQyRaIrXh31kopkeCoq80QDpm.png"
            alt=""
          />
        </div>
        <div class="list-title">
          李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫
        </div>
        <div class="list-bottom">
          <div class="left">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKibH9TSb1cKvqZocrBYAsT3Wb4s4vjEvpVhR9e8eoeR2aHstKlFbPBztFiaXxfknsEvI0nO9FjKtNA/132"
              alt=""
            />
            <div class="name">YANG</div>
          </div>
          <div class="right">
            <i class="iconfont icon-xianshi"></i>
            <span>1787</span>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="list-pic">
          <img
            src="https://x.dscmall.cn/storage/uploads/image/9310_s89DXOQyRaIrXh31kopkeCoq80QDpm.png"
            alt=""
          />
        </div>
        <div class="list-title">
          李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫
        </div>
        <div class="list-bottom">
          <div class="left">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKibH9TSb1cKvqZocrBYAsT3Wb4s4vjEvpVhR9e8eoeR2aHstKlFbPBztFiaXxfknsEvI0nO9FjKtNA/132"
              alt=""
            />
            <div class="name">YANG</div>
          </div>
          <div class="right">
            <i class="iconfont icon-xianshi"></i>
            <span>1787</span>
          </div>
        </div>
      </div>
      <div class="list">
        <div class="list-pic">
          <img
            src="https://x.dscmall.cn/storage/uploads/image/9310_s89DXOQyRaIrXh31kopkeCoq80QDpm.png"
            alt=""
          />
        </div>
        <div class="list-title">
          李医生Razer雷蛇 Firefly烈焰神虫织物版 Chroma幻彩硬质游戏鼠标垫
        </div>
        <div class="list-bottom">
          <div class="left">
            <img
              src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKibH9TSb1cKvqZocrBYAsT3Wb4s4vjEvpVhR9e8eoeR2aHstKlFbPBztFiaXxfknsEvI0nO9FjKtNA/132"
              alt=""
            />
            <div class="name">YANG</div>
          </div>
          <div class="right">
            <i class="iconfont icon-xianshi"></i>
            <span>1787</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      headerTitles: [
        {
          name: "社区",
        },
        {
          name: "店铺街",
        },
        {
          name: "视频",
        },
      ],
      current: "current",
      active: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    change(index) {
      this.active = index;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.discover-page {
  .header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    ul {
      padding: 1.5rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 10%;
      background-color: #fff;
      font-size: 1.6rem;
      color: gray;
    }
  }
  .current {
    position: relative;
    &::after {
      content: " ";
      position: absolute;
      display: block;
      width: 1.9rem;
      height: 0.4rem;
      border-radius: 0.2rem;
      background: #fa2a29;
      left: 50%;
      margin: 0;
      transform: translateX(-50%);
      top: 3rem;
    }
  }
  .lists {
    height: 100vh;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    margin-top: 3rem;
    .list {
      width: 49%;
      margin-top: 2rem;
      .list-pic {
        position: relative;
        width: 100%;
        border-radius: 1rem;
        margin-bottom: 0.7rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 63.46vw;
          object-fit: cover;
          border-radius: 1rem;
        }
      }
      .list-title {
        margin-top: 1rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
      }
      .list-bottom {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
          }
          .name {
            margin-top: 0.4rem;
            margin-left: 1rem;
          }
        }
      }
    }
  }
}
</style>